<template>
  <a-spin :spinning="loading">
    <a-form
      :model="formState"
      ref="formDataRef"
      name="basic"
      :label-col="{ style: 'width:80px' }"
      :wrapper-col="{ style: 'calc(100% - 80px)' }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请填写用户名!' }]">
        <a-input v-model:value="formState.username" :maxlength="20" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="姓名" name="name" :rules="[{ required: true, message: '请填写姓名!' }]">
        <a-input v-model:value="formState.name" :maxlength="20" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请填写手机号!' }]">
        <a-input v-model:value="formState.phone" @keyup="validateZhInputHandle($event, formState, ['phone'])" :maxlength="20" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="部门" name="deptId" :rules="[{ required: true, message: '请选择部门!' }]">
        <a-tree-select
          v-model:value="formState.deptId"
          style="width: 100%"
          :tree-data="departmentOpts"
          tree-checkable
          allow-clear
          :max-tag-count="2"
          :treeCheckStrictly="true"
          :show-checked-strategy="SHOW_PARENT"
          placeholder="请选择"
          :fieldNames="{ label: 'name', value: 'id', children: 'childList' }"
          tree-node-filter-prop="name"
        />
      </a-form-item>
      <a-form-item label="角色" name="roleId" :rules="[{ required: true, message: '请选择角色!' }]">
        <a-select v-model:value="formState.roleId" placeholder="请输入">
          <a-select-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="岗位" name="positionCode" :rules="[{ required: true, message: '请选择岗位!' }]">
        <a-select v-model:value="formState.positionCode" placeholder="请输入">
          <a-select-option v-for="(item, index) in dataDict['USER_POSITION']" :key="index" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="仓库" name="warehouseList" :rules="[{ required: false, message: '请选择仓库!' }]">
        <a-select v-model:value="formState.warehouseList" mode="multiple" :max-tag-count="1" placeholder="请输入">
          <a-select-option v-for="(item, index) in warehouseOpts" :key="index" :label="item.cnName" :value="item.id">{{ item.cnName }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="企微账号" name="weComId">
        <a-input v-model:value="formState.weComId"></a-input>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
        <a-button type="primary" html-type="submit">确定</a-button>
        <a-button @click="resetHandle">取消</a-button>
      </a-form-item>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import CommonHook from "@/hook/commonHook";
import { getUserDetailsApi } from "@/api/managementCenter/departmentPersonnel";
import { TreeSelect } from "ant-design-vue";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number;
    passData: DepartmentPersonnel.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();
const { dataDict } = CommonHook();
const { visible, type, passData } = toRefs(props);
const { formDataRef, formState, departmentOpts, roleList, getAllRole, getDeptTree, loading, warehouseOpts, getAllWarehouseCode } = InitHook();
const { onFinish, onFinishFailed, validateZhInputHandle, resetHandle, resetFields } = OperationHook({ formDataRef, formState, emit, type, passData, warehouseOpts, dataDict });
const init = () => {
  if (type.value === 2) {
    loading.value = true;
    getUserDetailsApi({ id: passData.value.id })
      .then((res: any) => {
        const { code, data } = res;
        if (code === 200) {
          Object.assign(formState, data);
          formState.deptId = data.parentDeptIds || [];
          if (data.warehouseList && data.warehouseList.length > 0) {
            formState.warehouseList = data.warehouseList.map((t: any) => {
              return t.key;
            });
          } else {
            formState.warehouseList = [];
          }
        }
      })
      .finally(() => (loading.value = false));
  }
  getAllRole();
  getDeptTree();
  getAllWarehouseCode();
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      resetFields();
      formDataRef.value.clearValidate();
    }
  }
);
init();
</script>
<style lang="stylus" scoped></style>
